<template>
        <div id="container">
          
        </div>
        <a @click="animateDown" class="start-btn">开始</a>
        <a @click="animateUp" class="start-btn" style="right:100px">拉起</a>
        
</template>
    
<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";


onMounted(() => {
});
    var map;
    var pl;
    var loca;
    AMapLoader.load({
    key: "251bbaadc0b5dbe21d3b8648104661cc", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15z
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    Loca:{
        version:'2.0.0'
    }
  }).then(
    (Amap)=>{
   map = new Amap.Map('container', {
          zoom: 11.14,
          viewMode: '3D',
          pitch: 0,
          mapStyle: 'amap://styles/fresh',
          center: [108.953509, 34.265619],
          showBuildingBlock: true,
          showLabel: false,

        terrain: true,
        rotateEnable: true,
        pitchEnable: true,
        rotation: 0,
      });
     loca = new Loca.Container({
        map:map
    })
      loca.ambLight = {
          intensity: 0.3,
          color: '#fff',
      };
      loca.dirLight = {
          intensity: 0.6,
          color: '#fff',
          target: [0, 0, 0],
          position: [0, -1, 1],
      };
      loca.pointLight = {
          color: 'rgb(100,100,100)',
          position: [120.24289, 30.341335, 20000],
          intensity: 3,
          // 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
          distance: 50000,
      };
       var geo = new Loca.GeoJSONSource({
          url: '/areaJson.geojson',
      });
       pl = new Loca.PolygonLayer({
          // loca,
          zIndex: 120,
          opacity: 0.8,
          // cullface: 'none',
          shininess: 10,
          hasSide: true,
      });

      pl.setSource(geo);
      pl.setStyle({
          topColor: (index, feature)=>{
              return feature.properties.color
          },
          sideTopColor: function (index, feature) {
            return feature.properties.color
          },
          sideBottomColor: function (index, feature) {
            return feature.properties.color
          },
          height: function (index, feature) {
              return feature.properties.height
          },
          textureSize: [1000, 820],
          texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/windows.jpg',
          altitude: 0,
      });
      loca.add(pl);

      // 创建纯文本标记
      var text = new AMap.Text({
        text: '纯文本标记',
        anchor: 'center', // 设置文本标记锚点
        draggable: true,
        cursor: 'pointer',
        angle: 0,
        visible: false,
        offset: [0, -25],
        style: {
          'padding': '5px 10px',
          'margin-bottom': '1rem',
          'border-radius': '.25rem',
          'background-color': 'rgba(0,0,0,0.5)',
          // 'width': '12rem',
          'border-width': 0,
          'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .3)',
          'text-align': 'center',
          'font-size': '16px',
          'color': '#fff',
        },
      });
      text.setMap(map);
      // 拾取
      map.on('mousemove', (e) => {
        var feat = pl.queryFeature(e.pixel.toArray());
        if (feat) {
          text.show();
          text.setText(feat.properties.name);
          text.setPosition(e.lnglat);
          pl.setStyle({
            topColor: (index, feature) => {
              if (feature === feat) {
                return [164, 241, 199, 0.5];
              }
              return feature.properties.color
            },
            sideTopColor: (index, feature) => {
              if (feature === feat) {
                return [164, 241, 199, 0.5];
              }
              return feature.properties.color
            },
            sideBottomColor: (index, feature) => {
              if (feature === feat) {
                return [164, 241, 199, 0.5];
              }
              return feature.properties.color
            },
            height: function (index, feature) {
              return feature.properties.height
            },
          });
        } else {
          text.hide();
        }
      });
      
      // 生长动画
      map.on('click', function () {
        pl.addAnimate({
          key: 'height',
          value: [0, 1],
          duration: 1000,
          easing: 'CubicInOut',
        }, function () {
          // console.log(123);
        });
      });

       AMap.plugin(
        ["AMap.ControlBar", "AMap.ToolBar", "AMap.Scale"],
        function () {
          //异步加载插件
          var controlBar = new AMap.ControlBar({
            //控制地图旋转插件
            position: {
              right: "10px",
              top: "10px",
            },
          });
          map.addControl(controlBar);
          var toolBar = new AMap.ToolBar({
            //地图缩放插件
            position: {
              right: "40px",
              top: "110px",
            },
          });
          map.addControl(toolBar);
          var scale = new AMap.Scale();
          map.addControl(scale);
        }
      );
      loca.animate.start();
    }
  ) 
  var speed = 1;
  const animateDown = ()=>{
            // 镜头动画
            map.setZoom(11.8, true);
            map.setPitch(0, true);
            map.setCenter([108.965922,34.181605], true);
            map.setRotation(1, true);
            pl.hide(1000);
            // 下钻
            loca.viewControl.addAnimates([
              {
              pitch: {
                value: 0,
                control: [[0, 20], [1, 0]],
                timing: [0, 0, 0.8, 1],
                duration: 3000 / speed,
              },
              zoom: {
                value: 19,
                control: [[0, 12.8], [1, 15.9]],
                timing: [0, 0, 0.8, 1],
                duration: 3000 / speed,
              },
              rotation: {
                value: -20,
                control: [[0, 20], [1, -20]],
                timing: [0, 0, 0.8, 1],
                duration: 2000 / speed,
              },
            }
          ], 
          function () {
              // setTimeout(function () {
              //   // pl.show(2000);
              // }, 3000);

              loca.viewControl.addAnimates([
                //寻迹
                {
                  center: {
                    value: [108.965922,34.181605],
                    control: [[108.96545,34.180767], [108.966115,34.180092]],
                    timing: [0.3, 0, 0.1, 1],
                    duration: 8000 / speed,
                  },
                  zoom: {
                    value: 17,
                    control: [[0.3, 17], [1, 17]],
                    timing: [0.3, 0, 0.7, 1],
                    duration: 4000 / speed,
                  },
                  pitch: {
                    value: 50,
                    control: [[0.3, 0], [1, 50]],
                    timing: [0.3, 0, 1, 1],
                    duration: 3000 / speed,
                  },
                  rotation: {
                    value: -80,
                    control: [[0, -20], [1, -80]],
                    timing: [0, 0, 1, 1],
                    duration: 1000 / speed,
                  },
                },
                 {
                  // 环绕
                  pitch: {
                    value: 50,
                    control: [[0, 40], [1, 50]],
                    timing: [0.3, 0, 1, 1],
                    duration: 7000 / speed,
                  },
                  rotation: {
                    value: 370,
                    control: [[0, -80], [1, 260]],
                    timing: [0.42, 0, 0.4, 1],
                    duration: 7000 / speed,
                  },
                  zoom: {
                    value: 20,
                    control: [[0.3, 18], [1, 17]],
                    timing: [0.3, 0, 0.9, 1],
                    duration: 5000 / speed,
                  },
                },
              ], 
              // function () {
              //     pl.hide(1000);
              // }
              );
          });
        }
        const animateUp = ()=>{
          loca.viewControl.addAnimates([
            {
                  // 拉起
                  center: {
                    value: [108.964865,34.181308],
                    control: [[108.966115,34.180092],[108.96545,34.180767]],
                    timing: [0.3, 0, 0.7, 1],
                    duration: 2000 / speed,
                  },
                  pitch: {
                    value: 0,
                    control: [[0, 0], [1, 100]],
                    timing: [0.1, 0, 0.7, 1],
                    duration: 2000 / speed,
                  },
                  rotation: {
                    value: 361,
                    control: [[0, 260], [1, 361]],
                    timing: [0.3, 0, 0.7, 1],
                    duration: 2000 / speed,
                  },
                  zoom: {
                    value: 13.8,
                    control: [[0, 17.5], [1, 13.8]],
                    timing: [0.3, 0, 0.7, 1],
                    duration: 2500 / speed,
                  },
                }
          ])
        }

const convertToSubarrays = (arr) =>{
    const result = [];

    for (let i = 0; i < arr.length; i += 2) {
        const subarray = [arr[i], arr[i + 1]];
        result.push(subarray);
    }

    console.log(`output->result`,result)
}
convertToSubarrays([])
</script>
    
<style lang="scss">
    #container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 900px;
}
.start-btn {
            position: absolute;
            bottom: 20px;
            right: 20px;
            padding: 0 18px;
            height: 30px;
            background-color: #1A66FF;
            border-radius: 5px;
            z-index: 1;
            cursor: pointer;
        }
        .start-btn>a {
            color: #fff;
            display: block;
            height: 100%;
            line-height: 30px;
            text-align: center;
            font-size: 14px;
        }
</style>